<template>
  <div class="container">
    <el-card>

      <el-row type="flex" justify="space-between">
        <el-form ref="requestParameters" :inline="true" label-position="right">

          <el-form-item label="关键字">
            <el-input
              v-model="datakeyword"
              style="width: 200px;"
              class="filter-item"
              placeholder="根据文章标题搜索"
            />
          </el-form-item>
          <el-form-item label="状态">
            <el-select v-model="datastate" placeholder="请选择">
              <el-option label="启用" value="1" />
              <el-option label="禁用" value="0" />

            </el-select>
            <el-button
              class="filter-item cleanbtn"
              size="small"
              @click="cleanData"
            >清除</el-button>
            <el-button
              class="filter-item"
              size="small"
              type="primary"
              @click="searchDirectorys"
            >搜索</el-button>

          </el-form-item>

        </el-form>
        <el-button
          class="filter-item fr"
          size="small"
          type="success"
          icon="el-icon-edit"
          @click="newadd"
        >新增技巧</el-button>
      </el-row>

      <el-alert
        v-if="alertText !== ''"
        :title="alertText"
        type="info"
        class="alert"
        :closable="false"
        show-icon
      />
      <el-table
        :key="tableKey"
        v-loading="listLoading"
        :data="dataList"
        :row-class-name="rowClassStatus"
        element-loading-text="拼命加载中"
        element-loading-spinner="el-icon-loading"
        fit
        highlight-current-row
        style="width: 100%"
      >
        <el-table-column align="left" :label="$t('table.id')" type="index" width="80px" />
        <el-table-column label="文章标题" width="400px">
          <template slot-scope="scope">
            <span>{{ scope.row.title }}</span>
            <a v-if="scope.row.videoURL?.trim()" :href="scope.row.videoUrl" class="el-icon-film" @click="videoShowFn" />
            <el-dialog
              v-if="videoShow"
              :visible.sync="videoShow"
              width="20%"
              custom-class="videodialog"
            >
              <video style="width:100%;height:100%" :src="url" muted="" controls="" preload="auto" autoplay="autoplay" type="video/mp4" />
            </el-dialog>
          </template>
        </el-table-column>
        <el-table-column label="阅读数" width="80px">
          <template slot-scope="scope">
            <span>{{ scope.row.visits }}</span>
          </template>
        </el-table-column>
        <el-table-column label="录入人">
          <template slot-scope="scope">
            <span>{{ scope.row.username }}</span>
          </template>
        </el-table-column>
        <el-table-column label="录入时间">
          <template slot-scope="scope">
            <span>{{ scope.row.createTime |formatDate('yyyy-MM-dd hh:mm:ss') }}</span>
          </template>
        </el-table-column>

        <el-table-column :label="$t('table.state')">
          <template slot-scope="scope">
            <span>{{ scope.row.state?'已启用':'已禁用' }}</span>
          </template>
        </el-table-column>
        <!-- 按钮 -->
        <el-table-column
          :label="$t('table.actions')"
          class-name="small-padding fixed-width"
          width="180px"
        >
          <template slot-scope="scope">
            <el-button
              type="text"
              size="medium"
              @click="Preview(scope.row)"
            >预览</el-button>
            <el-button
              type="text"
              size="medium"
              @click="changeState(scope.row.id,scope.row.state)"
            >{{ scope.row.state? $t('table.prohibit') :'启用' }}</el-button>
            <el-button
              type="text"
              size="medium"
              :disabled="scope.row.state?true:false"
              @click="editFn(scope.row)"
            >{{ $t('table.edit') }}</el-button>
            <el-button
              size="medium"
              type="text"
              :disabled="scope.row.state?true:false"
              @click="deleteFn(scope.row.id)"
            >{{ $t('table.delete') }}</el-button>
          </template>
        </el-table-column>
      </el-table>
      <el-row type="flex" justify="end" style="margin-top:20px">
        <PageTool :total="page.counts" @pageChange="pageChange" @pageSizeChange="pageSizeChange" />

      </el-row>
    </el-card>
    <ArticlessAdd
      ref="addpro"
      :show-dialog.sync="showDialog"
      :symple-date="sympleDate"
      @addSub="addSub"
    />
    <ArticlesPreview ref="Preview" :center-dialog-visible.sync="centerDialog" />
  </div>
</template>

<script>
import PageTool from '../components/pageTool.vue'
import { list, changeState, remove, add, update } from '@/api/hmmm/articles.js'
import ArticlessAdd from '../components/articles-add.vue'
import ArticlesPreview from '../components/articles-preview.vue'
export default {

  components: {
    PageTool,
    ArticlessAdd,
    ArticlesPreview
  },
  data() {
    return {
      videoShow: false,
      centerDialog: false,
      showDialog: false,
      sympleDate: [],
      alertText: '',
      dataList: [],
      tableKey: '',
      listLoading: false,
      page: {
        page: 1,
        pagesize: 10,
        counts: 0
      },
      data: {
        id: null,
        keyword: null,
        state: null
      },
      id: null,
      datastate: null,
      datakeyword: null,
      url: '',
      list: ['//v.api.aa1.cn/api/api-dy-girl/video/0029.mp411包 api.aa1.cn  免费视频API.mp4',
        '//v.api.aa1.cn/api/api-dy-girl/video/0056.mp418包 api.aa1.cn  免费视频API.mp4',
        '//v.api.aa1.cn/api/api-dy-girl/video/0019.mp40001包 api.aa1.cn  免费视频API.mp4',
        '//v.api.aa1.cn/api/api-dy-girl/video/0030.mp411包 api.aa1.cn  免费视频API.mp4',
        '//v.api.aa1.cn/api/api-dy-girl/video/0011.mp416包 api.aa1.cn  免费视频API.mp4',
        '//v.api.aa1.cn/api/api-dy-girl/video/0011.mp411包 api.aa1.cn  免费视频API.mp4',
        '//v.api.aa1.cn/api/api-dy-girl/video/0199.mp4  api.aa1.cn  免费视频API.mp4',
        '//v.api.aa1.cn/api/api-dy-girl/video/0107.mp433包 api.aa1.cn  免费视频API.mp4',
        '//v.api.aa1.cn/api/api-dy-girl/video/0124.mp40001包 api.aa1.cn  免费视频API.mp4',
        '//v.api.aa1.cn/api/api-dy-girl/video/0035.mp4 api.aa1.cn  免费视频API.mp4'

      ]
    }
  },
  created() {
    this.getList()
  },
  methods: {
    videoShowFn() {
      this.videoShow = true
      const a = Math.floor(Math.random() * 10)
      this.url = this.list[a]
    },
    newadd() {
      this.id = null
      this.showDialog = true
      this.$refs.addpro.ruleForm.title = ''
      this.$refs.addpro.ruleForm.articleBody = ''
      this.$refs.addpro.ruleForm.videoURL = ''
    },
    cleanData() {
      this.data = {
        id: null,
        keyword: null,
        state: null
      }
      this.page = {
        page: 1,
        pagesize: 10,
        counts: 0
      }
      this.datastate = null
      this.datakeyword = null
    },
    async getList() {
      this.listLoading = true
      const { data } = await list(this.page)
      // console.log(data)
      this.page.counts = data.counts
      this.alertText = `数据一共${data.counts}条`
      this.dataList = data.items
      //   console.log(this.dataList)
      this.listLoading = false
    },
    pageChange(pagenum) {
      this.page.page = pagenum
      this.getList()
    },
    pageSizeChange(pagesize) {
      this.page.pagesize = pagesize
      //   console.log(this.page)
      this.getList()
    },
    searchDirectorys() {
      this.data.state = this.datastate
      this.data.keyword = this.datakeyword
      this.page.keyword = this.data.keyword
      this.page.state = this.data.state
      //   console.log(this.page)
      this.getList()
    },
    changeState(id, state) {
      this.data.id = id
      this.data.state = !state ? 1 : 0

      changeState(this.data).then((result) => {
        this.$message.success('操作成功')
        this.getList()
        this.data = {
          id: null,
          keyword: null,
          state: null
        }
      }).catch((err) => {
        console.log(err)
      })
    },
    deleteFn(id) {
      this.data.id = id
      this.$confirm('是否确认删除？').then(
        () => {
          remove(this.data).then((result) => {
            this.$message.success('操作成功')
            this.page.page = Math.ceil((this.page.counts - 1) / this.page.pagesize)
            this.getList()
            this.data.id = null
          }).catch((err) => {
            console.log(err)
          })
        }
      ).catch(() => {
        this.$message('取消操作')
      })
    },
    async addSub(ruleForm) {
    //   console.log(ruleForm)
      if (!this.id) {
        await add(ruleForm)
        this.getList()
        this.showDialog = false
        this.$message.success('添加成功')
      } else {
        // console.log('修改')
        ruleForm.id = this.id
        await update(ruleForm)
        this.getList()
        this.showDialog = false
        this.$message.success('修改成功')
      }
      this.id = null
    },
    rowClassStatus() {
    },
    editFn(data) {
    //   console.log(data)
      this.id = data.id
      this.$refs.addpro.title = '修改文章'
      this.$refs.addpro.ruleForm.title = data.title
      this.$refs.addpro.ruleForm.articleBody = data.articleBody
      this.$refs.addpro.updata(data.articleBody)
      this.$refs.addpro.ruleForm.videoURL = data.videoURL
      this.showDialog = true
    },
    Preview(data) {
      this.centerDialog = true
      this.$refs.Preview.articleDetail = data
    }
  }
}
</script>

<style scoped lang='scss'>
.container{
    padding: 10px;
}
.filter-item{
    margin-left: 10px;
}
.el-button--success{
    height: 32px;
}
::v-deep{
    .el-input__inner{
        height: 32px;
    }
    .el-form-item__label{
        width: 80px;
        font-size: 14px;
    }
    .el-icon-film{
        margin-left: 2px;
    color: #00f;
    font-size: 18px;
    }
    .el-row--flex{
       align-items: center;
    }
       .el-alert.alert.el-alert--info.is-light{
        margin-bottom: 15px;
    }
    .videodialog{
        background-color: transparent;
        border: 0;
        .el-dialog__header{
        background-color: transparent;
        }
        .el-dialog__body{
            padding: 0
        }

    }
}

</style>

